<template>
	<div class="header-content">
		<div class="log">
			队友在线文档管理
			<!-- <image src="../../static/partner_logo.png" style="height: 50px;width: 60px;"></image> -->
		</div>
		<el-menu :default-active="activeIndex" class="el-menu-nav" mode="horizontal" @select="handleSelect">
			<el-menu-item index="1">
				<el-popover
				    placement="bottom"
				    trigger="click">
					<template v-if="msgTipsData.length>0">
						<block v-for="(item,index) in msgTipsData" :key="index">
							<block v-for="(item1,index1) in item.partnerChangeUploadModule" :key="index1">
								<view class="msg-tip-upload-project">
									<p>{{ item1.userData[0].username }}：新上传了项目模块，《{{ item1.fileName }}》</p>
									<p class="time">{{ item1.time | $_formatDate}}</p>
								</view>
							</block>
						</block>
					</template>
					<template v-else>
						<view class="msg-tip-upload-project">
							<p style="text-align: center;">没有最新消息</p>
						</view>
					</template>
						
					<div slot="reference" class="el-icon-chat-line-square position_father">
						<el-badge class="position_child" :value="tipsNum" :max="99"/>
					</div>
				  </el-popover>
			</el-menu-item>
			<el-submenu index="2">
				<template slot="title">{{ email }}</template>
				
				<el-menu-item index="2-1" @click="toPage('/users/modifi_pass?type=modifi')">修改密码</el-menu-item>
				<el-menu-item index="2-2">个人中心(待续)</el-menu-item>
				<el-menu-item v-if="relevanceUserID === -1" index="2-3" @click="handleBindStep">关联小程序</el-menu-item>
				<el-menu-item v-if="relevanceUserID !== -1" index="2-3">已关联小程序</el-menu-item>
			</el-submenu>
			<el-menu-item class="logout-btn" index="3" @click="logoutFun"><i class="el-icon-switch-button"></i>安全退出</a></el-menu-item>
		</el-menu>
		
		<el-dialog
		  title="绑定小程序步骤"
		  :visible.sync="dialogVisible"
		  width="30%">
		  <el-card class="box-card">
		    <div slot="header" class="clearfix">
		      <span>Step1（微信登录小程序，并输入个人信息）</span>
		    </div>
		    <image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-partneronlinedocadmin/ba27e300-a706-11ea-b94e-47f67ecf8268.png" mode="widthFix"></image>
		  </el-card>
		  <el-card class="box-card">
		    <div slot="header" class="clearfix">
		      <span>Step2（进入绑定页面）</span>
		    </div>
		    <image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-partneronlinedocadmin/87e7f6f0-a706-11ea-8a36-ebb87efcf8c0.png" mode="widthFix"></image>
		  </el-card>
		  <el-card class="box-card">
		    <div slot="header" class="clearfix">
		      <span>Step3（输入邮箱、密码、验证码,提交绑定）</span>
		    </div>
		    <image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-partneronlinedocadmin/87e44d70-a706-11ea-8bd0-2998ac5bbf7e.png" mode="widthFix"></image>
		  </el-card>
		  <el-card class="box-card">
		    <div slot="header" class="clearfix">
		      <span>Step4（进入该系统并重新登录，即可完成绑定）</span>
		    </div>
			<div>恭喜您，完成绑定，开启您愉悦的项目之旅吧！</div>
		  </el-card>
		  <span slot="footer" class="dialog-footer">
		    <el-button type="primary" @click="dialogVisible = false">好的</el-button>
		  </span>
		</el-dialog>
	</div>
</template>

<script>
	import {mapState,mapMutations} from "vuex"
	export default {
		data(){
			return{
				activeIndex: '1',
				msgTipsData:[],
				tipsNum:0,
				dialogVisible:false
			}
		},
		computed:{
			...mapState(['email','relevanceUserID'])
		},
		watch:{
			relevanceUserID(newVal,oldVal){
				this.getMsgTips()
			}
		},
		created() {
			if(this.relevanceUserID !== -1){
				this.getMsgTips()
			}
			// console.log(this.relevanceUserID);
		},
		methods:{
			...mapMutations(['logout']),
			handleSelect(key, keyPath) {
			    // console.log(key, keyPath);
			},
			handleBindStep(){ //查看绑定小程序步骤
				this.dialogVisible = true;
			},
			toPage(path){
				this.$router.push(path);
			},
			async getMsgTips(){
				let {relevanceUserID} = this;
				let res = await uniCloud.callFunction({
					name:"getHeaderMsgTips",
					data:{relevanceUserID}
				});
				if(res.result.status === 0){
					this.msgTipsData = res.result.data;
					res.result.data.forEach(item=>{
						item.partnerChangeUploadModule.forEach(item2=>{
							this.tipsNum += 1;
						})
					})
				}
			},
			logoutFun(){
				this.$alert('确认退出吗？', '提示', {
				  confirmButtonText: '确定',
				  showCancelButton:true,
				  cancelButtonText:'取消',
				  callback: action => {
					  if(action === 'confirm'){
						  this.logout();
						  uni.clearStorage(); // 清除缓存
						  this.$router.push("/users/signin");
					  }
				    
				  }
				})
			}
		}
	}
</script>

<style lang="scss">
	.el-menu-nav{
		@include f-1;
		@include f-jc(flex,flex-end)
	}
	.header-content{
		@include f-ai-jc(flex,center,space-between)
	}
	.log{
		width: 180px;
		text-align: center;
		color: #333;
		font-size: 22px;
		font-family: '华文行楷', Times, serif;
	}
	.el-icon-chat-line-square{
		font-size: $uni-font-size-extra-large;
		.position_child{
			right: 5px;
			top: -12px;
		}
	}
	.logout-btn,.el-icon-switch-button{
		color: $uni-color-error !important;
	}
	.msg-tip-upload-project{
		margin-bottom: 14px;
		width: 300px;
		.time{
			text-align: right;
			font-size: $uni-font-size-extra-sm;
			margin-top: 2px;
		}
	}
	.box-card{
		margin-top: 20px;
	}
</style>
